<script setup>
import { nextTick, ref, computed } from "vue";
import { poster } from "@/services/user";
import { onHide, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
import { useUserStore } from "@/stores/user";
const current = ref(0);
//轮播图
const indicatorDots = ref(false);
const autoplay = ref(true);
const interval = ref(5000);
const duration = ref(500);
const ablum = ref(null);
const projectdet = ref(null);
const store = ref({});
const order = ref(null);
const dictorderpay = ref([]);
const urlnum = ref(0);
const userStore = useUserStore();
const userInfo = computed(() => userStore.userInfo);
posterfun();

// #ifdef MP-WEIXIN

onShareAppMessage(() => {
  return {
    title: "私语清韵",
    path: "/pages/index/index?referrer_id=" + userInfo.value.promo_code,
    imageUrl: dictorderpay.value[current.value].image,
  };
});

// 朋友圈分享
onShareTimeline(() => {
  return {
    title: "私语清韵",
    path: "/pages/index/index?referrer_id=" + userInfo.value.promo_code,
    imageUr: dictorderpay.value[current.value].image,
  };
});
// #endif

async function posterfun() {
  uni.showLoading({
    title: "海报生成中...",
  });
  let res = await poster();
  uni.hideLoading;
  dictorderpay.value = res.data;
  //   urlnum.value=
}

const changefun = (event) => {
  current.value = event.detail.current;
  uni.hideLoading();
};
const numorder = (num) => {
  return num < 10 ? "0" + num : num;
};

const showmycode = () => {
  uni.navigateTo({
    url: "/pages/promotion-code/Index",
  });
};

const onImageLoad = (event) => {
  uni.hideLoading;
  // 在这里执行加载完成后的操作
};
onHide(() => {
  uni.hideLoading;
});

// 保存到手机
const download = () => {
  // #ifdef H5
  let a = document.createElement("a");
  a.download = "";
  a.href = dictorderpay.value[current.value].image;
  document.body.appendChild(a);
  a.click();
  a.remove();
  // #endif

  // #ifdef APP-PLUS || MP-WEIXIN
  wx.getImageInfo({
    src: dictorderpay.value[current.value].image,
    success: (res) => {
      uni.saveImageToPhotosAlbum({
        filePath: res.path,
        success: () => {
          uni.showToast({
            title: "保存成功",
            icon: "success",
            duration: 1000,
          });
        },
        fail: (err) => {
          uni.showModal({
            title: "授权提示",
            content: "需要授权才能保存图片到相册",
            success: (res) => {
              if (res.confirm) {
                // #ifdef  MP-WEIXIN
                // 用户同意授权，重新请求授权
                uni.openSetting({
                  success() {
                    // 再次尝试保存图片
                    uni.saveImageToPhotosAlbum({
                      filePath: "图片路径",
                      success: () => {
                        console.log("图片保存成功");
                      },
                      fail: (err) => {
                        console.log("图片保存失败", err);
                      },
                    });
                  },
                  fail() {
                    // 用户拒绝授权
                    console.log("用户拒绝授权保存图片到相册");
                  },
                });
                // #endif
              }
            },
          });
        },
      });
    },
    fail: (err) => {
      uni.showToast({
        title: "保存失败!",
        icon: "error",
        duration: 2000,
      });
    },
  });
  // #endif
};
</script>

<template>
  <view class="content">
    <view class="image-num"
      >{{ numorder(current + 1) }}/{{ numorder(dictorderpay.length) }}</view
    >
    <view class="image-swiper">
      <swiper
        class="swiper"
        circular
        :current="current"
        :indicator-dots="indicatorDots"
        :autoplay="autoplay"
        :interval="interval"
        :duration="duration"
        @change="changefun"
      >
        <swiper-item v-for="(item, index) in dictorderpay" :key="index">
          <!--  -->
          <view class="swiper-item">
            <image :src="item.image"></image>
          </view>
        </swiper-item>
      </swiper>
      <view class="image-ts">如只需二维码，可访问二维码名片</view>

      <!-- <image src="" mode="widthFix" /> -->
      <view class="share-list">
        <!-- #ifdef MP -->

        <button class="item" open-type="share" hover-class="none">
          <view class="share-list-item">
            <image src="../../static/share/icon_3.png" mode="scaleToFill" />
            <view>分享到微信</view>
          </view>
        </button>
        <!-- #endif -->
        <!-- #ifdef MP || APP-PLUS  -->
        <view class="share-list-item" @click="download">
          <image src="../../static/share/icon_1.png" mode="scaleToFill" />
          <view>保存到相册</view>
        </view>
        <!-- #endif -->
        <view class="share-list-item" @click="showmycode">
          <image src="../../static/share/icon_2.png" mode="scaleToFill" />
          <view>二维码名片</view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
@import "./index.scss";
</style>
